<template>
  <div class="recom">
    <div class="rec1"><span class="rsp">为您推荐</span></div>
    <ul class="rcli">
      <router-link tag="li" v-for="(item, index) in shopList" :key="index" :to="'./detail/' + item.id"  class="goods">
        <div class="goods-pro">
          <div class="gimg"><img :src="item.imgs"></div>
          <span class="gdesc">{{item.text}}</span>
          <span class="gpric">{{item.price}}</span>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  data () {
    return {
      shopList: [{
        id: 1,
        imgs: '//img12.360buyimg.com/n7/jfs/t26521/255/354303394/114127/45e84a0d/5b8feb98N4e9a765c.jpg!q70.dpg',
        text: 'adidas（阿迪达斯）三星CROWN -TPU透明壳原装手机壳 三叶草时尚简约经典款防摔防滑超薄硅胶保护套',
        price: '￥139'
      }, {
        id: 2,
        imgs: '//img10.360buyimg.com/mobilecms/s372x372_jfs/t21727/42/369890282/222300/9b08e458/5b0b64cbN7b328d99.jpg!q70.dpg',
        text: '索尼（SONY）MDR-1A 高解析度 立体声耳机 银色',
        price: '￥1699'
      }, {
        id: 3,
        imgs: '//img12.360buyimg.com/mobilecms/s372x372_jfs/t8629/336/437436137/182283/c1f4e0e1/59a7ce53N46ccee92.jpg!q70.dpg',
        text: 'Onitsuka Tiger 运动休闲鞋 男女 TIGER ALLY D701L-0707 蓝绿色/蓝绿色 43.5',
        price: '￥514'
      }, {
        id: 4,
        imgs: '//img12.360buyimg.com/mobilecms/s372x372_jfs/t1/3045/24/10929/295079/5bcd9c07E1b5f3eee/e2af0da3e9c44417.jpg!q70.dpg',
        text: '贡苑 茶叶 2018年新茶 高山云雾绿茶 春茶毛尖茶礼盒500g',
        price: '￥109'
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .recom
    margin-bottom 45px
  .rec1
    width 100%
    height .8rem
    background #f0f2f5
    text-align center
    color #848689
    font-size .28rem
    line-height .8rem
    position relative
    .rsp
      padding 0 10px
      background-color #f0f2f5
      z-index 10
      display inline-block
      position relative
  .rec1:after
    content ""
    height 1px
    width 100%
    position absolute
    top 50%
    left 0
    background-color #cbcbcb
    -webkit-transform scaleY(.5)
    transform scaleY(.5)
  .rcli
    background #f0f2f5
    overflow hidden
    .goods:nth-child(2n+1)
      padding-right: 1px
    .goods:nth-child(2n)
      padding-left: 1px
    .goods
      float left
      width 50%
      box-sizing border-box
      padding-bottom 4px
      position relative
      .goods-pro
        background #ffffff
        font-size 0
        .gimg img
          width 100%
        .gdesc
          box-sizing: border-box
          height: 31px
          font-size: 13px
          overflow: hidden
          text-overflow: ellipsis
          display: -webkit-box
          -webkit-line-clamp: 2
          -webkit-box-orient: vertical
          word-break: break-word
          color: #232326
          margin-top: 5px
          line-height: 16px
          margin-bottom: 3px
          padding: 0 4px
        .gpric
          color: #f23030
          display: inline-block
          padding: 0 5px 0 4px
          position: relative
          top: 1px
          height: 25px
          line-height: 25px
          font-size 16px
</style>
